<template>
	<view class="xh-container">
		<xh-title-bar
			:title="title"
			:hideBack="hideBack"
			:background="titlerBarBackground"
		/>
		<view class="safe-content">
			<slot>safe-container </slot>
		</view>
		<view
			class="bottom-bar"
			v-if="!hideBottomBar"
		>
			<xh-button
				v-if="btnText"
				:borderRadius="0"
				type="primary"
				@click="this.$emit('onSave')"
			>
				{{ btnText }}</xh-button
			>
			<view
				class="bottom-safe-box"
				:style="{ height: `${Math.min(safeBottomHeight, 20)}px` }"
			></view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		btnText: {
			type: [String],
			default: '',
		},
		hideBottomBar: {
			type: Boolean,
			default: false,
		},
		titlerBarBackground: {
			type: String,
			default: '#ffffff',
		},
		title: {
			type: String,
			default: '标题',
		},
		hideBack: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			// eslint-disable-next-line no-undef
			safeBottomHeight: getApp().globalData.windowInfo.safeAreaInsets.bottom,
		};
	},
};
</script>

<style scoped lang="scss">
.xh-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	.safe-content {
		flex-grow: 1;
		overflow-y: auto;
	}
}
</style>
